<template>
  <el-row>
    <el-col :span="24">
      <el-form-item :label="mapRelation.labelName">
        <el-button
          class="addData-small-button"
          type="primary"
          icon="el-icon-plus"
          @click="addParams"
        >
        </el-button>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="10" v-for="(item, index) in parameter" :key="index">
    <el-col :span="11">
      <el-form-item :label="mapRelation.keyName">
        <el-input
          v-model="item.key"
          :placeholder="mapRelation.placeholderKeyName"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item :label="mapRelation.valueName">
        <el-input
          v-model="item.value"
          :placeholder="mapRelation.placeholderValueName"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button
        size="small"
        class="addData-small-button"
        type="danger"
        icon="el-icon-minus"
        @click="removeParams(index)"
      >
      </el-button>
    </el-col>
  </el-row>
</template>

<script>
import { reactive, toRefs, watch } from "vue";
export default {
  props: {
    mapRelation: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, ctx) {
    const state = reactive({
      parameter: [
        {
          key: "",
          value: "",
        },
      ],
    });
    watch(()=>state.parameter, (value) => {
      let result = vm.$tool.arrayToObj(value);
      ctx.emit("newAddMap", result);
    },{
      deep:true
    });
    // 添加参数
    const addParams = () => {
      state.parameter.push({
        key: "",
        value: "",
      });
    };
    // 删除参数
    const removeParams = (index) => removeRowData(state.parameter, index);
    // 删除行数据
    const removeRowData = (data, index) => {
      return data.splice(index, 1);
    };
    return {
      ...toRefs(state),
      addParams,
      removeParams,
      removeRowData,
    };
  },
};
</script>

<style scoped>
.addData-small-button {
  padding: 11px 15px;
}
</style>
